<div style="width:800px">
<div style="float:right;font-size:0.7em" id="message">
	<? if ($portal['public'] == 'Y') { ?>
		<b>Single click to load nearby photos.</b>
	<? } ?>
</div>
<?
print "<form class=\"sform\">";
print "<div class=\"d\">";
print "View style<br/>";
print "<select name=\"view\" onchange=\"this.form.submit()\">";
foreach ($views as $key => $value) {
	printf("<option value=\"%s\"%s>%s</option>",$key,($key==$opt['view'])?' selected':'',$value);
}
print "</select></div>";
print "</form>";

?>
<br style="clear:both"/>
</div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="/maps/thumbs.js"></script>

<script type="text/javascript"> 
	var map = null;
	

	function init() {
		var mapCenter = new google.maps.LatLng(54.55,-3.88);
		var mapZoom = 6;
		var mapType = google.maps.MapTypeId.TERRAIN;
		
		if (location.hash.length) {
			// If there are any parameters at the end of the URL, they will be in location.search
			// looking something like  "#ll=50,-3&z=10&t=h"

			// skip the first character, we are not interested in the "#"
			var query = location.hash.substring(1);

			var pairs = query.split("&");
			for (var i=0; i<pairs.length; i++) {
				// break each pair at the first "=" to obtain the argname and value
				var pos = pairs[i].indexOf("=");
				var argname = pairs[i].substring(0,pos).toLowerCase();
				var value = pairs[i].substring(pos+1).toLowerCase();

				if (argname == "ll") {
					var bits = value.split(',');
					mapCenter = new google.maps.LatLng(parseFloat(bits[0]),parseFloat(bits[1]));
				}
				
				if (argname == "t") {
					if (value == "h") {mapType = google.maps.MapTypeId.HYBRID;}
					if (value == "r") {mapType = google.maps.MapTypeId.ROADMAP;}
					if (value == "t") {mapType = google.maps.MapTypeId.TERRAIN;}
					if (value == "s") {mapType = google.maps.MapTypeId.SATELLITE;}
				}

				if (argname == "z") {mapZoom = parseInt(value);}
			}
		}
			
		map = new google.maps.Map(document.getElementById('map'), {
			'zoom': mapZoom,
			'center': mapCenter,
			'mapTypeId': mapType
		});
		
		if (!location.hash.length) {
			var bounds = new google.maps.LatLngBounds; 
			<?

			list($miny,$maxy,$minx,$maxx) = array_values(getRow("SELECT MIN(wgs84_lat),MAX(wgs84_lat),MIN(wgs84_long),MAX(wgs84_long) FROM p2.gridimage{$portal_id}_bi_view"));

			print "bounds.extend(new google.maps.LatLng($miny,$minx));\n";
			print "bounds.extend(new google.maps.LatLng($maxy,$maxx));\n";

			?>
			map.fitBounds(bounds);
		}
		
		<? if ($portal['public'] == 'Y') { ?>
		google.maps.event.addListener(map, 'click', function(event) {
			var ll = event.latLng;
			$.get("/images.ajax.php?d=2&lat="+ll.lat()+"&long="+ll.lng(),function (data) {
				$("#photo_container").html(data);
			});

			return true;
		});
		<? } ?>
		
		google.maps.event.addListener(map, 'idle', update_map);
		google.maps.event.addListener(map, 'idle', makeHash);
		google.maps.event.addListener(map, 'maptypeid_changed', makeHash);
	
	}

	function makeHash() {
		var ll = map.getCenter().toUrlValue(6);
		var z = map.getZoom();
		var t = map.getMapTypeId().substr(0,1);
		window.location.hash = '#ll='+ll+'&z='+z+'&t='+t;
		//document.getElementById("otherLink").hash = '#ll='+ll+'&z='+z;
	}

	// Register an event listener to fire when the page finishes loading.
	google.maps.event.addDomListener(window, 'load', init);
</script> 


	<div id="map" style="width: 800px;height: 700px;"></div> 
	
	
	<div id="photo_container" style="width:800px;"></div>
